<template>
	<div class="mobilehomeme">
		<div class="div1">
			<div class="div1-1">
				<img class="img1" src="../../../assets/img/mobile/消息.png">
				<img class="img2" src="../../../assets/img/mobile/设置.png">
				
			</div>
		</div>

		<div class="myself"v-show="token!=null">
		<img v-bind:src="`http://127.0.0.1/api/public/showimg/${$store.state.pic}`">
		<div class="myself_name">
				<p class="p1">{{$store.state.name}}</p>
				<p>剩余积分:2888</p>
				<a @click="logout()">退出</a>
			</div>
		</div>

		<div class="login" v-show="token==null">
			<img src="../../../assets/img/mobile/登录用户.png" />
			<router-link to="/mobileLogin">
				<p>点击登录</p>
			</router-link>
		</div>

		<div class="list">
			<div class="a5">
				<i class="el-icon-notebook-2"></i>
				<p>我的订单</p>
			</div>
			<div class="a5">
				<i class="el-icon-shopping-cart-2"></i>
				<router-link to="/mobile/mobileCar">
					<p>购物车</p>
				</router-link>
			</div>
			<div class="a5">
				<i class="el-icon-first-aid-kit"></i>
				<p>我的收藏</p>
			</div>
		</div>

		<div class="pic">
			<el-carousel :interval="5000" arrow="nerver" height="9rem">
				<el-carousel-item v-for="item in melist" :key="item.id">
					<img :src="`http://127.0.0.1:80/api/public/showimg/${item.picture}`" />
				</el-carousel-item>
			</el-carousel>
		</div>

		<div class="a7">
			<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		</div>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileHomeMe',
		components: {
			MobileHomeList
		},
		data() {
			return {
				token:'',
				melist: [],
				newslist: []
			}
		},
		methods:{
			logout() {
				this.$store.state.name = localStorage.setItem('name', '');
				this.$store.state.pic = localStorage.setItem('img', '');
				this.$store.state.role = localStorage.setItem('role', '');
				this.$store.state.token = localStorage.setItem('token', '');				
				// 清空后跳转到登录页面
				this.$router.push("/mobileLogin");
			}
		},
		mounted() {
				this.token  = window.localStorage.getItem('token');
				console.log(this.token);
			// 显示轮播图片
			this.$axios.get("http://127.0.0.1:80/api/public/findHot/1/4")
				.then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.melist = resp.data.data;
				});
			// 新书上市  按类型分页查找书本  typeid = 0 时， 表示查找全部类型
			this.$axios.get("http://127.0.0.1/api/public/findPageBook/2/6/0")
				.then((resp) => {
					console.log(resp.data.data);
					this.newslist = resp.data.data.books;
				})
		}
	}
</script>

<style scoped>
	.mobilehomeme {
		position: relative;
		top: 36px;
		background-color: #242a38;
	}

	.mobilehomeme .div1 {
		height: 4rem;
		width: 100%;
		margin-top: 1.2rem;
	}

	.mobilehomeme .div1-1 img {
		height: 2rem;
		width: 2rem;
		margin: 0.8rem 0.5rem;
	}

	.mobilehomeme .div1-1 {
		margin-top: 0.5rem;
		float: right;
	}


	.mobilehomeme .myself {
		display: flex;
		margin-bottom: 1rem;
		color: white;
	}

	.mobilehomeme .myself .myself_name {
		margin-left: 1.5rem;

	}

	.mobilehomeme .myself .myself_name .p1 {
		font-weight: 600;
		font-size: 1.7rem;
		margin: 0.3rem 0rem;
	}

	.mobilehomeme .myself img {
		width: 24%;
		height: 20%;
		border-radius: 50%;
		margin-bottom: 1.5rem;
		margin-left: 1.5rem;
	}

	.mobilehomeme .login {
		display: flex;
	}

	.mobilehomeme .login img {
		width: 24%;
		height: 20%;
		border-radius: 50%;
		margin-bottom: 1.5rem;
		margin-left: 1.5rem;
	}

	.mobilehomeme .login p {
		font-weight: 600;
		font-size: 1.5rem;
		margin: 1rem 1rem;
		color: white;
	}

	.list {
		display: flex;
		justify-content: space-between;
		border-radius: 1rem;
	}

	.list i {
		font-size: 2rem;
		color: #ff5966;
		margin: 0.4rem 1.5rem;
	}

	.a5 {
		margin: 1rem 1rem;
	}

	.a5 p {
		margin: 0.3rem 0.6rem;
		font-size: 1.1rem;
		color: white;
	}

	.a5 a {
		color: white;
	}

	.pic {
		margin-top: 0.5rem;
		width: 100%;
		background-color: #e7d2b1;
		margin-bottom: 1.5rem;
		border-radius: 0.3rem;
	}

	.pic img {
		width: 100%;
		height: 100%;
	}

	/* 穿刺,把样式穿刺到最底层,css用户修改固定组件样式的操作 */
	.pic .el-carousel /deep/ .el-carousel__button {
		height: 3px !important;
		width: 0.25rem;
		border-radius: 50%;

	}

	/* 轮播滑动条颜色 */
	.pic .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #a68b5b !important;
	}
</style>